<template>
  <!--  isFullScreen 2. 控制全屏图标切换的变量 -->
  <svg-icon
    @click="handleClick"
    custom-class="w-2em h-2em"
    :icon-name="
      isFullScreen
        ? 'ant-design:fullscreen-exit-outlined'
        : 'ant-design:fullscreen-outlined'
    "
  />
</template>

<script lang="ts" setup>
// 1. 导入 screenfull
import screenfull from "screenfull"
// 2. 控制全屏图标切换的变量
const isFullScreen = ref(false)
// 4. 调用弹窗组件
const { proxy } = getCurrentInstance()!
// 3. 图标点击事件，切换全屏/退出全屏
function handleClick() {
  // 浏览器支持全屏
  if (screenfull.isEnabled) {
    // 切换全屏/退出全屏
    screenfull.toggle()
  } else {
    proxy!.$message("浏览器不支持全屏")
  }
}
// 5. 事件执行函数
function updateFullscreenStatus() {
  // 看是否是全屏，全屏就切换状态
  isFullScreen.value = screenfull.isFullscreen
}
onMounted(() => {
  // 6. 判断浏览器支持是否正支持全屏，实现事件监听
  if (screenfull.isEnabled) {
    // 监听
    screenfull.on("change", updateFullscreenStatus)
  }
})
onBeforeUnmount(() => {
  // 7. 页面 卸载，取消事件监听
  if (screenfull.isEnabled) {
    screenfull.off("change", updateFullscreenStatus)
  }
})
</script>
